iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0

前面提到資料類型的時候,有稍微提到陣列,而現在我們要開始介紹這個方便儲存的好東西!

        var person=['jason','leo','dina'] //陣列範例

為甚麼要使用到陣列來儲存變數呢?因為我們有相同類型的項目要儲存時,若是單一變數儲存一個值,會有大量的變數,宣告上面會麻煩許多,程式碼也會變得冗長,當陣列的存在就是一次能夠儲存許多的值,且在for迴圈遍歷時可以訪問這些變量。

      var person1 = "jason";
      var person2 = "leo";
      var person3 = "dina";
      //宣告上麻煩,及程式碼十分冗長

抓取陣列元素

首先我們要瞭解到陣列一開始的索引(index)是怎麼開始的,就像一般的程式邏輯一樣,第一個元素是person[0]、第二個是person[1]。

  <body>
    <p>我的名子是: <spa id="demo"></span> </p>
    <script>
      var person = ["jason", "leo", "dina"];
      document.getElementById("demo").innerHTML = person[0];
    </script>
  </body>

更改陣列中的元素

  <body>
    <p>我的名子是: <spa id="demo"></span> </p>
    <script>
      var person = ["jason", "leo", "dina"];
      person[0]="perter";                   //更改陣列中元素
      document.getElementById("demo").innerHTML = person[0];
    </script>
  </body>

你也可以將整個陣列給印出來

  <body>
    <p>大家的名子是: <spa id="demo"></span> </p>
    <script>
      var person = ["jason", "leo", "dina"];
      document.getElementById("demo").innerHTML = person;
    </script>
  </body>

陣列長度

當我們今天想要知道一個陣列有多少元素時,length是一個很好用的方法。

    <script>
      var person = ["jason", "leo", "dina"];
      var x= person.length
      console.log(x)
    </script>                               //length=3;

或是想訪問陣列最後一個元素時,卻又不曉得最後一個索引(index)是多少。

    <script>
      var person = ["jason", "leo", "dina"];
      var x= person.length
      console.log(person[x-1]) ;             //'dina'
    </script>

for迴圈遍歷陣列

  <body>
    <p id="demo"></p>

    <script>
      var person, text, len, i;
      person = ["jason", "leo", "dina"];
      len = person.length;

      text = "<ul>";
      for (i = 0; i < len; i++) {
        text += "<li>" + person[i] + "</li>";
      }
      text += "</ul>";

      document.getElementById("demo").innerHTML = text;
    </script>
  </body>

今天先介紹到這邊,陣列還有許多的方法及遍歷陣列不同的類型,我們明天再繼續介紹!


上一篇
Day7 Javascript事件
下一篇
Day9 Javascript 陣列for loop (1)
系列文
Javascripts惡補小教室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言